#{extends 'layout/main.html' /}
#{set title:'Test upload !!!' /}
<!-- 
<link rel="stylesheet" href="/public/javascripts/plugins/plupload/jquery.plupload.queue/css/jquery.plupload.queue.css" type="text/css" media="screen" />
<script type="text/javascript" src="/public/javascripts/plugins/plupload/jquery.plupload.queue/jquery.plupload.queue.js"></script>
<script type="text/javascript" src="/public/javascripts/plugins/plupload/plupload.gears.js"></script>
 -->

<script type="text/javascript" src="/public/javascripts/plugins/plupload/plupload.js"></script>
<script type="text/javascript" src="/public/javascripts/plugins/plupload/plupload.html5.js"></script>
 
Upload csv
<div id="container_csv">
    <div id="filelist_csv"></div>
    <a id="pickfiles_csv" href="javascript:;">[Select files]</a> 
</div>
<hr/>
Upload image
<div id="container_image">
    <div id="filelist_image"></div>
    <a id="pickfiles_image" href="javascript:;">[Select files]</a> 
</div>
<hr/>
<div>
	<button onclick="upload_click();">Upload</button>
</div>
<script>
	var uploader_csv = new plupload.Uploader({
		runtimes : 'html5',
		browse_button : 'pickfiles_csv',
		container: 'container_csv',
		chunk_size: '1mb',
		max_file_size : '1gb',
		url : '/utility/upload?type=csv&t=${time}',
		multi_selection: false,
	});
	
	uploader_csv.bind('FilesAdded', function(up, files) {
		for(var i=0; i<files.length; i++)
		{
			uploader_csv.removeFile(files[0]);
		}
	
		for (var i in files) {
			if(files[i].name.substr(-3).toLowerCase() != 'zip')
			{
				uploader_csv.removeFile(files[i]);
				alert('Only upload .zip file !');
				return;
			}
			
			document.getElementById('filelist_csv').innerHTML = '<div id="' + files[i].id + '">' + files[i].name + ' (' + plupload.formatSize(files[i].size) + ') <b></b></div>';
		}
	});

	uploader_csv.bind('UploadProgress', function(up, file) {
		document.getElementById(file.id).getElementsByTagName('b')[0].innerHTML = '<span>' + file.percent + "%</span>";
	});
	
	uploader_csv.bind('UploadComplete', function(up, file) {
		if(typeof(uploader_image) != 'undefined' && uploader_image.files.length > 0)
		{
			uploader_image.start();
		}
		else
		{
			upload_success();
		}
	});
	
	uploader_csv.init();
	
	/*****************/
	var uploader_image = new plupload.Uploader({
		runtimes : 'html5',
		browse_button : 'pickfiles_image',
		container: 'container_image',
		chunk_size: '1mb',
		max_file_size : '1gb',
		url : '/utility/upload?type=image&t=${time}',
		multi_selection: false,
	});
	
	uploader_image.bind('FilesAdded', function(up, files) {
		for(var i=0; i<files.length; i++)
		{
			uploader_csv.removeFile(files[0]);
		}
	
		for (var i in files) {
			if(files[i].name.substr(-3).toLowerCase() != 'zip')
			{
				uploader_csv.removeFile(files[i]);
				alert('Only upload .zip file !');
				return;
			}
			
			document.getElementById('filelist_image').innerHTML = '<div id="' + files[i].id + '">' + files[i].name + ' (' + plupload.formatSize(files[i].size) + ') <b></b></div>';
		}
	});

	uploader_image.bind('UploadProgress', function(up, file) {
		document.getElementById(file.id).getElementsByTagName('b')[0].innerHTML = '<span>' + file.percent + "%</span>";
	});
	
	uploader_image.bind('UploadComplete', function(up, file) {
		upload_success();
	});
	
	uploader_image.init();
	
	function upload_click(){
		uploader_csv.start();
	}
	
	function upload_success(){
		var option = {
	       type: 'POST',
	       url: '@{utility.finishUpload()}?t=${time}',
	       dataType: 'json',
	       success: function(response){
	       	if(response.status == "success")
	       	{
	       		alert("Upload successfully!");
	       	}
	       	else
	       	{
	       		alert("Upload failure. Please try again!");
	       	}
	       },
	       error: function(XMLHttpRequest, textStatus, errorThrown) {
	       	
	       }
	   };
	   
	   $.ajax(option);
	}
</script>

